<template>
    <div class='myshop-container'>
       <h1>购物车列表</h1>
     <ul class="shop-header">
         <li>商品名称</li>
         <li>商品价格</li>
         <li>数量</li>
         <li>删除</li>
     </ul>

     <ul class="shop-list">
         <li v-for='(item,index) in $store.state.ShopCarList' :key='index'>
         <span>{{item.goodsName}}</span>
         <span>{{item.goodsPrice}}</span>
          <span>
         <button @click="deleteCount(item)">-</button>
                    {{item.count}}
                    <button @click="addCount(item)">+</button>
                    </span>
            <button size="mini" @click="deleCount(item)">删除</button>
            </li>
     </ul>

     <h3>{{total}}</h3>
    </div>

</template>
  
  <script>
  export default {
      
  
      data() {
          return {
              
          };
      },

  
      methods: {
            // 增加数量
            addCount (item) {
                this.$store.commit('addCount', item.id)
            },
            // 减数量
            deleteCount (item) {
                this.$store.commit('deleteCount', item.id)
            },
            deleCount(item){
               this.$store.commit('deleCount',item)
            }
        },
      computed:{
           total () {
                return this.$store.state.ShopCarList.reduce((prev, next) => {
                    return prev + (next.count * Number(next.goodsPrice))
                }, 0)
          }
      }
  };
  </script>

 <style lang="scss" scoped>
 h1 {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.myshop-container{
    flex:1;
    height: 100%;
  border:2px solid #e4393c
}
.shop-header {

    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    li {
            flex: 1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
    }

    .shop-list {
        li {
            display: flex;
            justify-content: space-between;

            span {
                flex: 1;
                text-align: center;
                line-height: 25px;
            }

            .el-button {
                flex: 1;
            }
        }
    }

</style>